<template>
	<view>
		<view class="cu-custom" :style="[{ height: ustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="style"
				:class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{ top: statusBar + 'px' }]">
					<slot></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		computed,
		ref
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	
	
	/**
	 * 定义组件的属性
	 * @typedef {Object} Props
	 * @property {string} bgColor - 背景颜色,C参数是类名
	 * @property {boolean|string} isBack - 是否返回
	 * @property {string} bgImage - 背景图片
	 */
	const props = defineProps({
		bgColor: {
			type: String,
			default: "bg-blue",
		},
		isBack: {
			type: [Boolean, String],
			default: false,
		},
		bgImage: {
			type: String,
			default: "",
		},
	})
	const statusBar = ref(proxy.StatusBar)
	const customBar = ref(proxy.CustomBar)
	const style = computed(() => {
		const bgImage = props.bgImage;
		let style = `height:${customBar.value}px;padding-top:${statusBar.value}px;`;
		if (bgImage) {
			style = `${style}background-image:url(${bgImage});`;
		}
		return style;
	});
	const BackPage = () => {
		uni.navigateBack({
			delta: 1,
		});
	}
</script>

<style></style>